<template>
	<view class="content">
		<z-paging ref="paging"  v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top >
				<u-navbar back-text=""
				:leftIconColor="tksetting.titlecolor" 
				:bgColor="tksetting.color" 
				:titleStyle="{color:tksetting.titlecolor}" 
				:title="title"  
				:autoBack="true"  
				:placeholder="true">
				</u-navbar>
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view style="padding:20rpx;display: flex;gap: 12rpx;flex-wrap: wrap">
				<view style="width: 49%;" v-for="(item, index) in dataList" :key="index"  @click="itemClick(item.url)" >
					<view style="border: 1px #eaeaea solid;border-radius: 12rpx;padding: 12rpx;">
						<u--image radius="12" width="100%"  height="100" :src="item.pic" mode="scaleToFill"></u--image>
						<view style="line-height: 150%; padding: 15rpx 0;display: flex;justify-content: space-between;">
							<view>
								<u--text type="info" :text="item.title"></u--text>
								<u--text type="warning" :text="`积分奖励:`+item.jf"></u--text>
							</view>
							<view>
								<view :style="{'font-size': '24rpx','color':tksetting.titlecolor,'background':tksetting.color,'padding':'6rpx  12rpx'}">立即开始</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <u-cell-group>
					<u-cell v-for="(item, index) in dataList" :key="index" :title="item.title"  @click="itemClick(item)" ></u-cell>
			</u-cell-group> -->
		</z-paging>
		
	</view>
</template>
<script>
	import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
	import { mapState } from 'vuex';
	export default {
			data() {
				return {
					title:'小游戏中心',
					dataList: [],
					tabList: [],
					tabIndex: 0,
					cx:''
				}
			},
			onLoad(op) {
				
			},
			onReady() {
				
			},
			computed:{
				...mapState(['tksetting'])
			},
			methods: {
				itemClick(e){
					useRouter('/pages/tiku/game_info',{
						webviewUrl:e
					})
				},
				queryList(pageNo, pageSize) {
					const params = {
						page: pageNo,
						limit: pageSize,
						cx:this.cx,
						type: this.tabIndex + 1 //tab的索引，默认从1开始，后台根据这个处理并返回对应的TAB数据
					}
					this.$api.gamelist(params).then(res => {
						//console.log('list', res);
						if (res.code == 0) {
							this.$refs.paging.complete(res.data);
						}else{
							this.$refs.paging.complete(false);
						}
					})

				},
				
				
			}
		}
	</script>
<style lang="scss">
	
</style>